<template>
  <div class="hry-content">
    <header :class="needBackground ? 'needBackground' : ''">
      <md-icon
        v-show="showBackBtn"
        class="icon"
        name="arrow-left"
        @click="goBack()"
      ></md-icon>
      {{ title }}
      <div class="action">
        <slot name="action"></slot>
      </div>
    </header>
    <div class="wrapper">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { Icon } from "mand-mobile";

export default {
  name: "index",
  components: {
    [Icon.name]: Icon
  },
  props: {
    title: {
      type: String,
      default: "header"
    },
    showBackBtn: {
      type: Boolean,
      default: false
    },
    needBackground: {
      type: Boolean,
      default: true
    },
    backRouterName: {
      type: String,
      default: ""
    }
  },
  methods: {
    goBack() {
      if (window.history.length > 2) {
        this.$router.back(-1);
      } else {
        if (this.$route.matched.length === 3) {
          this.$router.push({ name: this.$route.matched[1].name });
        } else {
          this.$router.push({ name: "home" });
        }
      }
    }
  }
};
</script>

<style scoped lang="stylus">
.hry-content {
  height: 100%;
  width: 100%;
  flex_content()
  flex_column()
}

header {
  padding: 0 39px;
  height 100px;
  line-height 100px;
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  text-align center
  position relative
}

.icon {
  position absolute;
  line-height 100px;
  left 39px;
}

.action {
  position absolute;
  right: 39px;
  top 0
}

.needBackground {
  background: #ffffff;
  color: #444444;
  border-bottom 1px solid #f0f0f0
}

.wrapper {
  flex: auto;
  overflow: hidden;
  height: 100%;
}
</style>
